<template>
  <div class="app-container editcss">
    <el-row :gutter="0" class="el-card is-always-shadow el-card__body  card_contents" style="padding: 0px;">
      <el-col class="title_tops">
        <div class="title_tops_t">
          <div class="title_top_E">Department Editor</div>
          <div class="title_top_C">{{ id == 0 ? '新建' : '编辑' }}科室</div>
        </div>
        <div class="title_tops_b" @click="tabGo">
          <img src="../../assets/iconfont/arrow-left-circle.png" alt="" srcset="">
          <span>返回科室管理</span>
        </div>
      </el-col>
      <el-col class="dialog_title_ch_conter_operate  card_contents_tex">
        <div class="editHeld_conter_left">
          <el-upload class="avatar-uploader" :class="untenFun(addFrom.deptAvatarUrl)?'border':''" :show-file-list="false" action="/app/img/up" :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <div v-if="addFrom.deptAvatarUrl" class="avatar">
              <img :src="addFrom.deptAvatarUrl">
              <div>点击更换</div>
            </div>
            <i v-else class="el-icon-plus avatar-uploader-icon" :style="untenFun(addFrom.staffAvatarUrl)?'color: #FE294D;':''"></i>
            <div slot="tip" class="el-upload__tip">建议尺寸：800*800px</div>
          </el-upload>
          <div class="unten" v-if="untenFun(addFrom.beforeAvatarUpload)">请上传图片</div>
        </div>
        <div class="editHeld_conter_right">
          <div class="xiugai">
            <div>
              <screenSelect title="科室名称：" type='input' v-model="addFrom.deptName" :isValue='addFrom.deptName'
                placeholder="请输入科室全称" @transfer="valueHeld($event, 'deptName')" width='286px' position="top" :isBorder="untenFun(addFrom.deptName)" />
                <div class="unten" v-if="untenFun(addFrom.deptName)">请输入科室名称</div>
            </div>
            <div>
              <screenSelect title="科室详细地址：" type='input' v-model="addFrom.deptAddress" :isValue='addFrom.deptAddress'
                placeholder="请输入科室地址" @transfer="valueHeld($event, 'deptAddress')" width='609px' position="top" :isBorder="untenFun(addFrom.deptAddress)"/>
                <div class="unten" v-if="untenFun(addFrom.deptAddress)">请输入科室详细地址</div>
            </div>
          </div>
          <div class="xiugai">
            <div>
              <screenSelect title="科室联系人：" type='input' v-model="addFrom.deptContacts" :isValue='addFrom.deptContacts'
                placeholder="请输入" @transfer="valueHeld($event, 'deptContacts')" width='199px' position="top" :isBorder="untenFun(addFrom.deptContacts)"/>
                <div class="unten" v-if="untenFun(addFrom.deptContacts)">请输入科室联系人</div>
            </div>
              <div>
                <screenSelect title="联系电话：" type='input' v-model="addFrom.deptPhone" :isValue='addFrom.deptPhone'
                placeholder="请输入" @transfer="valueHeld($event, 'deptPhone')" width='199px' position="top" :isBorder="untenFun(addFrom.deptPhone)"/>
                <div class="unten" v-if="untenFun(addFrom.deptPhone)">请输入联系电话</div>
              </div>
              <div>
                <screenSelect title="科室状态：" type='select' v-model="addFrom.status" :isValue='addFrom.status' placeholder="请选择"
                @transfer="valueHeld($event, 'status')" :options="statusoptions" position="top" width='225px' :isBorder="untenFun(addFrom.status)"/>
                <div class="unten" v-if="untenFun(addFrom.status)">请选择科室状态</div>
              </div>
          </div>
          <!-- <div class="xiugai">
            <div v-if="isOpentype && isOperationProject">
              <screenSelect :title="'设备服务费（'+(isSettlementUnit?'小时':'每天')+'）：'" type='input' v-model="addFrom.equipmentServiceFee" :isValue='addFrom.equipmentServiceFee'
                placeholder="请输入" @transfer="valueHeld($event, 'equipmentServiceFee')" width='225px' position="top" :isBorder="untenFun(addFrom.equipmentServiceFee)"/>
                <div class="unten" v-if="untenFun(addFrom.equipmentServiceFee)">请输入设备服务费</div>
            </div>
            <div v-if="isOperationProject">
              <screenSelect title="设备押金：" type='input' v-model="addFrom.equipmentDeposit" :isValue='addFrom.equipmentDeposit'
                placeholder="请输入" @transfer="valueHeld($event, 'equipmentDeposit')" width='225px' position="top" :isBorder="untenFun(addFrom.equipmentDeposit)"/>
                <div class="unten" v-if="untenFun(addFrom.equipmentDeposit)">请输入设备押金</div>
            </div>
            <div v-if="isOpentype && isOperationProject">
              <screenSelect title="设备耗材费用：" type='input' v-model="addFrom.equipmentConsumablesCost" :isValue='addFrom.equipmentConsumablesCost'
                placeholder="请输入" @transfer="valueHeld($event, 'equipmentConsumablesCost')" width='225px' position="top" :isBorder="untenFun(addFrom.equipmentConsumablesCost)"/>
                <div class="unten" v-if="untenFun(addFrom.equipmentConsumablesCost)">请输入设备耗材费用</div>
            </div>
          </div> -->

        </div>
      </el-col>
      <el-col class="card_contents_footer">
        <el-button type="primary" class="ch_button_seav" @click="submit">
          <img class="ch_button_img_seav" src="../../assets/iconfont/icon-seavicon.png" alt="" srcset="">
          <div>提交</div>
        </el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import construction from '@/components/construction/index.vue'
import screenSelect from '@/components/screenSelect/index.vue'
import smallCard from '@/components/smallCard/index.vue'
import { getHosPartAdd, getHosPartUpdate,getHosPartDetail} from '@/api/administrative'
import {getHospitalDetail } from '@/api/organizational'
import {
  mapGetters
} from 'vuex'
export default {
  name: "Field",
  components: {
    construction,
    screenSelect,
    smallCard
  },
  computed: {
    ...mapGetters([
      'permissionList'
    ])
  },
  data() {
    return {
      keshi: 0,
      viewHeld: false,
      editHeld: false,
      familyHeld: false,
      statusoptions: [
        {
          value: 0,
          label: '运营中'
        }, {
          value: 1,
          label: '停运'
        }
      ],
      imageUrl: '',
      id: 0,
      addFrom:{hospitalId:this.$route.params.hospitalId,deptAvatarUrl:''},
      isUnten: false,
      isOpentype:false,
      isOperationProject:false,
      isSettlementUnit:false
    };
  },
  mounted() {
    this.id = this.$route.params.id

    console.log(this.$route.params);
    if(this.id != 0){
      this.getDetail(this.$route.params.hospitalId)
      getHospitalDetail(this.id).then(res => {
        if (res.code == 200) {
          this.isOpentype = res.data.hospital.operationType==1?false:true
          this.isOperationProject = res.data.hospital.operationProject==1?true:false
          this.isSettlementUnit = res.data.hospital.settlementUnit==2?true:false
        }
      })
    }else{
      getHospitalDetail(this.$route.params.hospitalId).then(res => {
        if (res.code == 200) {
          this.isOpentype = res.data.hospital.operationType==1?false:true
          this.isOperationProject = res.data.hospital.operationProject==1?true:false
          this.isSettlementUnit = res.data.hospital.settlementUnit==2?true:false
        }
      })
    }
  },

  methods: {
    untenFun(data) {
      if (this.isUnten) {
        if (data == undefined) {
          return true
        } else {
          if (data == '' && data != '0') {
            return true
          } else {
            return false
          }
        }

      } else {
        return false
      }

    },
    tabGo() {
      this.$router.go(-1)
    },
    getDetail(id){
      let that = this
      const loading = that.$loading({
        lock: true,
        text: 'Loading...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      getHosPartDetail(id).then(res=>{
        if(res.code == 200){
          this.addFrom = res.data.hospitalDepart
          loading.close()
        }
      })
    },
    submit() {
      let that = this
      that.isUnten = true
      for (let key in that.addFrom) {
        if (key != 'deptAvatarUrl') {
          if (that.addFrom[key] === '' || that.addFrom[key] === undefined) {
              console.log(key);
              return false
            }
        }
      }
      if (this.id == 0) {
        console.log(this.addFrom);

        getHosPartAdd(this.addFrom).then(res=>{
          if(res.code == 200){
            this.$Toast('成功')
            this.tabGo()
          }else{
            this.$Toast(res.message)
          }
        })
        // 新建逻辑
      } else {
        getHosPartUpdate(this.addFrom).then(res=>{
          if(res.code == 200){
            this.$Toast('修改成功')
            this.tabGo()
          }else{
            this.$Toast(res.message)
          }
        })
        // 编辑逻辑
      }
    },
    valueHeld(childParam, fatherparam) {
      this.isUnten = false
      this.addFrom[fatherparam] = childParam
    },
    handleAvatarSuccess(res, file) {
      // this.imageUrl = URL.createObjectURL(file.raw);
      if(res.code==200){
        this.addFrom.deptAvatarUrl = res.data.imgUrl
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }

  }
}
</script>
<style lang="scss" scoped>
.editcss {
  width: 100%;
  .card_contents {
    height: calc(100% - 1px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .card_contents_tex {
      flex: 1;
      overflow-y: auto;
      margin-bottom: 20px;
    }

    .card_contents_footer {
      padding: 16px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border-top: 1px solid #EFEFEF;
    }
  }

  .content_h {
    height: 149px;
    border-radius: 5px;
    padding: 0px;
  }

  .title_top {
    height: 79px;
    border-bottom: 1px solid #EFEFEF;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0 20px;
  }

  .title_tops {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 20px;
    height: 79px;
    border-bottom: 1px solid #EFEFEF;

    .title_tops_t {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .title_tops_b {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 28px;
      cursor: pointer;

      img {
        width: 24px;
        height: 24px;
        margin-right: 5px;
      }

      span {
        font-size: 16px;
        font-weight: 400;
        color: #000;
      }
    }
  }

  .screen_case_title {
    font-size: 16px;
    font-weight: 400;
    color: #000;
    margin-right: 35px;
  }

  .title_top_E {
    font-size: 12px;
    font-weight: 400;
    color: #9898989E;
  }

  .title_top_C {
    font-size: 18px;
    font-weight: 400;
    color: #000;
  }

  ::v-deep .ch_button_seav {
    padding: 7px 27px;

    span {
      display: flex;
      align-items: center;
      justify-content: center;

      div {
        font-size: 16px;
        font-weight: 400;
        margin-left: 10px;
      }
    }
  }

  .ch_button_img_seav {
    width: 24px;
    height: 24px;
  }

  .ch_button_img {
    width: 16px;
    height: 16px;
  }

  .dialog_title_ch_conter_operate {
    padding: 24px 35px;
    // border: 1px solid #EBEBEB;
    border-radius: 2px;
    display: flex;
    // align-items: center;
  }


  /*
  编辑
  */
  .editHeld_conter_left {
    margin-right: 70px;
    text-align: center;
    white-space: nowrap;
  }

  .editHeld_conter_right {
    flex: 1;

    .el-row {
      margin-bottom: 45px;
    }
  }

  ::v-deep .editHeld_conter_left .avatar-uploader .el-upload {
    border: 1px solid #d9d9d9;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-align: center;
  }
  ::v-deep .editHeld_conter_left .border .el-upload {
    border: 1px solid #FE294D;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-align: center;
  }

  // ::v-deep  .avatar-uploader .el-upload:hover {
  //   border-color: #409EFF;
  // }
  .editHeld_conter_left .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 160px;
    height: 160px;
    line-height: 160px;
    text-align: center;
  }

  .editHeld_conter_left .avatar {
    width: 160px;
    height: 160px;
    display: block;
    position: relative;

    img {
      width: 100%;
      height: 100%;
    }

    div {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #00000066;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 400;
      color: #FFFFFFAA;
    }
  }
}
</style>
